import React from 'react';
import css from './index.less';
import {observer} from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Image from 'components/config/image';
import BaseConfig from 'modules/common/config';
import Color from 'components/config/color';
import Bull from 'components/config/zoho/bull';
import Whxy from 'components/config/zoho/whxy';
import Stroke from 'components/config/zoho/stroke';
import Redirect from 'components/config/zoho/redirect';
import Level from 'components/config/zoho/level';
import Masking from 'components/config/zoho/masking';
import Icon from 'components/icon';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';


@observer
export default class ImageConfig extends BaseConfig {
  title = '图片设置';

  // 属性
  renderAttrConfig() {
    const {mod} = this.props;
    const groupProps = {
      defaultActiveKey: [2, 3, 6],
      list: [
        {
          title: '跳转链接',
          children: (
            <Redirect
              value={mod.link}
              onChange={value => {
                mod.update('link', value);
              }}
            />
          )
        },
        {
          title: '基本设置',
          children: (
            <div>
              <Bull key="0" title="大小">
                <Whxy label="宽" left={45} inputValue={mod.width} onChange={ val => {
                  mod.update('width', val);
                }}/>
                <Whxy label="高" left={105} inputValue={mod.height} onChange={ val => {
                  mod.update('height', val);
                }}/>
              </Bull>
              <Bull key="1" title="位置">
                <Whxy label="X" left={45} inputValue={mod.left} onChange={ val => {
                  mod.update('left', val);
                }}/>
                <Whxy label="Y" left={105} inputValue={mod.top} onChange={ val => {
                  mod.update('top', val);
                }}/>
              </Bull>
            </div>
          )
        },
        {
          title: '图案预览',
          children: (
            <Image
              src={mod.src}
              onChange={src => {
                if (src) {
                  mod.update('src', src);
                }
              }}
              onRemove={() => {
                mod.removeSelf();
              }}/>
          )
        },
        {
          title: '样式设置',
          children: (
            <div>
              <div className={css.strokeWrap}>
                <Color label="填充"
                       color={mod.background}
                       onChange={color => {
                         mod.update('background', color);
                       }}/>
              </div>
              <div className={css.strokeWrap}>
                <Color label="描边"
                       color={mod.borderColor}
                       onChange={color => {
                         mod.update('borderColor', color);
                       }}/>
                <Stroke label="描边" mod={mod} value={mod.borderWidth}/>
              </div>
              <Range label="透明"
                     onChange={val => {
                       mod.update('opacity', val);
                     }}
                     min={0}
                     max={100}
                     value={mod.opacity}/>
              <Range label="模糊"
                     onChange={val => {
                       mod.update('blur', val);
                     }}
                     min={0}
                     max={100}
                     value={mod.blur}/>
              <Range label="圆角"
                     onChange={val => {
                       mod.update('borderRadius', val);
                     }}
                     min={0}
                     max={100}
                     value={mod.borderRadius}/>

              <Range label="旋转"
                     onChange={val => {
                       mod.update('rotate', val);
                     }}
                     min={0}
                     max={360}
                     value={mod.rotate}/>
              <Bull key="2" title="翻转">
                <div className={css.iconRotate}>
                  <Icon type="icon-upside-down" onClick={ () => {
                    mod.changeRotateX();
                  }}/>
                  <Icon type="icon-flip" onClick={() => {
                    mod.changeRotateY();
                  }}/>
                </div>
              </Bull>
            </div>
          )
        },
        {
          title: '一键剪切蒙版',
          children: (
            <Masking mod={mod}/>
          )
        },
        {
          title: '滤镜设置',
          children: (
            <div>
              <Range label="亮度" min={0} max={200} step={1} value={mod.brightness} onChange={val => {
                mod.update('brightness', val);
              }}/>
              <Range label="对比" min={0} max={200} step={1} value={mod.contrast} onChange={val => {
                mod.update('contrast', val);
              }}/>
              <Range label="饱和" min={0} max={100} step={1} value={mod.saturate} onChange={val => {
                mod.update('saturate', val);
              }}/>
              <Range label="灰度" min={0} max={100} step={1} value={mod.grayscale} onChange={val => {
                mod.update('grayscale', val);
              }}/>
              <Range label="加温" min={0} max={100} step={1} value={mod.sepia} onChange={val => {
                mod.update('sepia', val);
              }}/>
              <Range label="色相" min={0} max={360} step={1} value={mod.hueRotate} onChange={val => {
                mod.update('hueRotate', val);
              }}/>
              <Range label="反色" min={0} max={100} step={1} value={mod.invert} onChange={val => {
                mod.update('invert', val);
              }}/>
            </div>
          )
        },
        {
          title: '元素层级顺序',
          children: (
            <Level mod={mod}/>
          )
        },
      ]
    };
    return (
      <ScrollArea
        style={{
          maxHeight: window.innerHeight - CONST.SIMULATOR_MARGIN_TOP - CONST.HEADER_HEIGHT - 50 - 44 - 50,
        }}
      >
        <Group {...groupProps}/>
      </ScrollArea>
    );
  }
}
